<template>
    <li class="sidebar-item" :class="{ 'is-expanded': expanded }">
        <template v-if="children">
            <a class="sidebar-link" href="javascript:;" @click="expand">
                <slot />
                <i class="sidebar-expansion_icon" />
            </a>
            <ul class="sidebar-sub_sidebar">
                <sidebar-item v-for="route in children" :key="route.id" :path="route.path" :children="route.children">
                    {{ route.label }}
                </sidebar-item>
            </ul>
        </template>
        <router-link
            class="sidebar-link"
            v-else
            :to="{ path, query: path.includes('attribute') ? $route.query : null }"
            :exact="path === '/'"
        >
            <slot />
        </router-link>
    </li>
</template>

<script>
export default {
    name: 'sidebarItem',

    data() {
        return {
            expanded: false,
        };
    },

    props: {
        path: String,
        children: Array,
    },

    methods: {
        expand() {
            this.expanded = !this.expanded;
        },
    },
};
</script>